<template>
	<swiper :options="swiperOption" ref="mySwiper">
		<!-- slides -->
		<swiper-slide v-for="(v,index) in obj.data" :key="index">
			<div class="flex-c-c-c" style="width: 100%;height: 100%;padding: 0 calc(50% - 625px);">
				<img :src="v.img" style="width: auto;height: 100%;">
			</div>
		</swiper-slide>
		<!-- Optional controls -->
		<div class="swiper-pagination" slot="pagination"></div>
	</swiper>
</template>

<script>
	import {
		Message
	} from 'element-ui';
	export default {
		name: 'carrousel',
		data() {
			return {
				swiperOption: {
					direction: 'vertical',
					slidesPerView: 1,
					spaceBetween: 0,
					mousewheel: true,
					autoHeight: true,
					height: window.innerHeight,
				},
				obj: []
			}
		},
		computed: {
			swiper() {
				return this.$refs.mySwiper.swiper
			}
		},
		mounted() {
			let headers = {
				token: this.$md5(this.$key + this.$dataTime()),
				rtimes: this.$dataTime(),
			}
			this.$axios.post(this.$base + '/Phylogeny/phylogenyInfo', headers).then((res) => {
					if (res.data.code == 2000) {
						this.obj = res.data.data
					} else {
						Message.error(res.data.msg);
					}
					console.log(res)
				})
				.catch(function(error) {
					Message.error(error.message);
				});
				headers.title = 'phy'
				this.$axios.post(this.$base + '/Index/getWebInfo', headers).then((res) => {
						if (res.data.code == 2000) {
							var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
							link.type = 'image/x-icon';
							link.rel = 'shortcut icon';
							link.href = res.data.data.ico;
							 document.title =res.data.data.web_title
							document.getElementsByTagName('head')[0].appendChild(link);
						} else {
							Message.error(res.data.msg);
						}
						console.log(res)
					})
					.catch(function(error) {
						Message.error(error.message);
					});
		},
		methods: {}
	}
</script>

<style lang="less" scoped>
	html,
	body {
		position: relative;
		height: 100%;
	}

	body {
		background: #eee;
		font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
		font-size: 14px;
		color: #000;
		margin: 0;
		padding: 0;
	}

	.swiper-container {
		width: 100%;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.swiper-slide {
		text-align: center;
		font-size: 18px;
		background: #fff;

		/* Center slide text vertically */
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	}
</style>
